<template>
  <el-collapse-item :class="{'active-header':item.isActive}">
    <template slot="title">
      <span style="display: block; width: 300px">{{ item.label }}</span>
      <el-button
        type="primary"
        plain
        round
        style="margin-top: 5px"
        @click="append(item)"
      >
        新增
      </el-button>
      <el-button
        type="danger"
        plain
        round
        style="margin-top: 5px"
        @click="remove(item)"
      >
        删除
      </el-button>
    </template>
    <el-collapse @change="handleChange" v-if="item.children && item.children.length > 0">
      <recursive-item
        v-for="(children, indexChildren) in item.children"
        :key="indexChildren"
        :name="item.indexChildren"
        :item="children"
        :isActive="children.isActive"
        @toggleActive="toggleActive(children)"
      />
    </el-collapse>
  </el-collapse-item>
</template>
  
  <script>
export default {
  name: "RecursiveItem",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  methods: {
    append(children) {
      console.log(children, "children");
      // 在此处编写新增逻辑
    },
    remove(children) {
      console.log(children, "children");
    },
    toggleActive(item) {
      console.log(item,"item");
      this.$emit("toggleActive", item);
    },
    handleChange(activeNames) {
      console.log(activeNames, "activeNames");
    },
  },
};
</script>